<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form>
          <a-form-item  label='设备名称' :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input disabled v-model='deviceName'></a-input>
          </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="状态">
          <a-radio-group buttonStyle="solid" v-model='status' :default-value='1' >
            <a-radio-button :value="1">有效</a-radio-button>
            <a-radio-button :value="0">无效</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="时间配置类型">
          <a-radio-group buttonStyle="solid" v-model='type' :default-value='1' >
            <a-radio-button :value="2">节假日配置</a-radio-button>
            <a-radio-button :value="1">时间段配置</a-radio-button>

          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="设置值">
          <a-input v-model='configValue'></a-input>
        </a-form-item>

        <a-form-item v-show='(this.type ===2)?true:false' label="开始日期" :labelCol="labelCol"
                     :wrapperCol="wrapperCol">
          <a-date-picker
            :showTime="true"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-dd HH:mm:ss"
            placeholder="开始日期"
            @change="onChangeStartDate"/>
        </a-form-item>

        <a-form-item v-show='(this.type ===2)?true:false' label="结束日期" :labelCol="labelCol"
                     :wrapperCol="wrapperCol">
          <a-date-picker
            :showTime="true"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-dd HH:mm:ss"
            placeholder="结束日期"
            @change="onChangeEndDate"/>
        </a-form-item>

        <a-form-item v-show='(this.type ===2)?false:true' label="开始时间" :labelCol="labelCol"
                     :wrapperCol="wrapperCol">
          <a-time-picker

            format="HH:mm:ss"
            value-format="HH:mm:ss"
            placeholder="开始时间"
            @change="onChangeStartTime"/>
        </a-form-item>

        <a-form-item v-show='(this.type ===2)?false:true' label="结束时间" :labelCol="labelCol"
                     :wrapperCol="wrapperCol">
          <a-time-picker
            :showTime="true"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            placeholder="结束时间"
            @change="onChangeEndTime"/>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@api/manage'

export default {
  name: 'AddConfModal',
  data(){
    return{
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      configValue:'',
      status:1,
      confirmLoading: false,
      deviceName: '',
      title:'',
      visible:false,
      type:1,
      confStartTime:'',
      confEndTime:'',
      confStartDate:'',
      confEndDate:'',
      url:{
        addConf:'deviceConf/addConf'
      },
      id:'',
    }
  },
  methods:{

    onChangeStartDate(value,dateString){
      this.confStartDate = dateString
      this.confStartTime = ""
    },
    onChangeEndDate(value,dateString){
      this.confEndDate = dateString
      this.confEndTime =""
    },
    onChangeStartTime(value,dateString){
      this.confStartTime=dateString
      this.confStartDate=""
    },
    onChangeEndTime(value,dateString){
      this.confEndTime=dateString
      this.confEndDate=""
    },
    close () {
      this.$emit('close');
      this.deviceName = ""
      this.status = ""
      this.configValue =""
      this.type = ""
      this.confStartTime = ""
      this.confEndTime = ""
      this.confStartDate = ""
      this.confEndDate = ""
      this.id=""
      this.visible = false;
    },
    setDeviceId(e){
      this.visible=true
      this.deviceId = e.id
      this.deviceName = e.name
    },
    setDevice(record){

      this.deviceName = record.deviceName
      this.status = record.status
      this.configValue = record.configValue
      this.type = record.type
      this.confStartTime = record.startTime
      this.confEndTime = record.endTime
      this.confStartDate = record.startTime
      this.confEndDate = record.endTime
      this.id = record.id
      this.visible=true

    },
    handleOk () {
      const that = this;
      let formData ={}
      formData.status = this.status
      formData.configValue = this.configValue
      formData.deviceName = this.deviceName
      formData.type = this.type
      if (this.id!=""||this.id!=null){
        formData.id = this.id
      }
      formData.deviceId = this.deviceId
      if (this.confStartTime==""||this.confStartTime==null){
        formData.startTime = this.confStartDate
        formData.endTime = this.confEndDate
      }else {
        formData.startTime = this.confStartTime
        formData.endTime=this.confEndTime
      }
        httpAction(this.url.addConf,formData,'post').then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.$emit('ok');
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;

          that.close();
        })
    },
    handleCancel () {
      this.close()
    },
  }
}
</script>

<style scoped>

</style>